
import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    TextInput,
    Image,
    Modal
} from 'react-native';
import Constant from '../../utils/Constant'//全局变量

const isIos = Platform.OS == 'ios';

const screenW = Dimensions.get('window').width;
let BarHeight = Constant.statusBarHeight;
const screenH = Dimensions.get('window').height;

export default class SelectAttachmentPop extends Component {

    constructor(props) {
        super(props);
        this.state = {
            
        }
    };

    componentDidMount() {
        
    }



    closeMsgModal() {
        if (this.props.onClose) {
            this.props.onClose()
        }
    }

    render() {

        return (
            <View style={{
                position: "absolute",
                left: 0,
                top: 0,
                zIndex: 1000,
                // backgroundColor: "rgba(0,0,0,0.25)",
                width: screenW,
                height: screenH,
                justifyContent: "center",
                alignItems: "center"
            }}>
                <Modal
                    transparent={true}
                    animationType={'fade'}
                    onRequestClose={() => this.closeMsgModal()}>
                    <View style={styles.container}>
                        <TouchableOpacity
                            style={styles.actContainer}
                            activeOpacity={1}
                            onPress={() => this.closeMsgModal()}>
                        </TouchableOpacity>
                        <View style={styles.framebox}>
                            <View style={styles.titleContainerStyle}>
                                <View>
                                    <Text style={styles.titleTextStyle}>请选择添加的附件类型</Text>
                                    <Text style={styles.titleDesTextStyle}>检测报告与维保报告仅支持添加PDF文件类型</Text>
                                </View>
                                

                                <TouchableOpacity
                                    style={styles.closeBtn}
                                    activeOpacity={0.8}
                                    onPress={() => this.closeMsgModal()}>
                                    <Image style={styles.closeImg} source={{ uri: 'icon_close_gray' }}></Image>
                                </TouchableOpacity>
                            </View>

                            <TouchableOpacity
                                style={this.props.detectionReportPdf && this.props.detectionReportPdf != '' ? styles.btnStyle : styles.btnStyle2}
                                onPress={() => {
                                    if (this.props.resultCallback && this.props.detectionReportPdf && this.props.detectionReportPdf != '') {
                                        this.props.resultCallback(1)
                                    }
                                }}>
                                <Text style={this.props.detectionReportPdf && this.props.detectionReportPdf != '' ?styles.btnText : styles.btnText2}>检测报告</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={this.props.maintenanceRecordPdf && this.props.maintenanceRecordPdf != '' ? styles.btnStyle : styles.btnStyle2}
                                onPress={() => {
                                    if (this.props.resultCallback && this.props.detectionReportPdf && this.props.detectionReportPdf != '') {
                                        this.props.resultCallback(2)
                                    }
                                }}>
                                <Text style={this.props.maintenanceRecordPdf && this.props.maintenanceRecordPdf != '' ? styles.btnText : styles.btnText2}>维保报告</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={styles.btnStyle}
                                onPress={() => {
                                    if (this.props.resultCallback) {
                                        this.props.resultCallback(3)
                                    }
                                }}>
                                <Text style={styles.btnText}>车辆证件/照片资料</Text>
                            </TouchableOpacity>

                            <TouchableOpacity
                                style={[styles.btnStyle,{marginTop:10}]}
                                onPress={() => {
                                    this.closeMsgModal()
                                }}>
                                <Text style={styles.btnText}>取消</Text>
                            </TouchableOpacity>
                            {
                                Constant.isIPhoneX ?
                                <View style={{width: '100%', height: 34, backgroundColor: '#FFF'}}/>
                                :
                                null
                            }
                            
                        </View>
                        
                    </View>
                </Modal>
            </View>

        );
    }

    


    // 关闭弹框
    closeshowbox = () => {
        if (this.props.onClose) {
            this.props.onClose()
        }
    }

}


const styles = StyleSheet.create({

    container: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.5)',
        zIndex: 1000,
    },
    actContainer: {
        flex: 1,
    },
    framebox: {
        position: 'absolute',
        bottom: 0,
        width: '100%',
        backgroundColor: '#f4f4f4',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    titleContainerStyle: {
        width: '100%',
        height: 60,
        borderTopLeftRadius: 6,
        borderTopRightRadius: 6,
        justifyContent: 'center',
        alignItems: 'center'
    },
    titleTextStyle: {
        fontSize: 16,
        textAlign: 'center',
        color: '#333333',
        fontWeight: 'bold'
    },
    titleDesTextStyle: {
        fontSize: 12,
        marginTop: 5,
        textAlign: 'center',
        color: '#999999'
    },
    
    closeImg:{
        width:20,
        height:20
    },
    closeBtn:{
        width:40,
        height:'100%',
        position:'absolute',
        justifyContent:'center',
        alignItems:'center',
        right:10
    },

    btnStyle:{
        justifyContent:'center',
        alignItems:'center',
        height:50,
        backgroundColor:'#fff',
        width:'100%'
    },
    btnStyle2:{
        justifyContent:'center',
        alignItems:'center',
        height:50,
        backgroundColor:'#f9f9f9',
        width:'100%'
    },
    btnText:{
        fontSize:16,
        color:'#333333'
    },
    btnText2:{
        fontSize:16,
        color:'#999999'
    }
});